import React from 'react'
import './UEditor.less'

class UEditor extends React.Component {
  constructor(props) {
    super(props)
    this.displayName = 'UEditor'
    this.state = {}
  }
  getContent() {
    var me = this
    var editor = window.UE.getEditor(me.props.id)
    var content = editor.getContent()
    return content
  }
  setContent(val) {
    var me = this
    var editor = window.UE.getEditor(me.props.id)
    var value = val ? val : '<p></p>'
    editor.setContent(value)
  }
  componentDidMount() {
    var me = this
    var editor = window.UE.getEditor(me.props.id, {
      // 工具栏
      toolbars: [[
        'source', 'bold', 'italic', 'underline', 'fontsize', 'fontborder', 'strikethrough', 'superscript', 'subscript', '|',
        'forecolor', 'backcolor', '|', 'kityformula'
        // 'simpleupload'
      ]],
      lang: 'zh-cn',
      // 字体
      'fontfamily': [
        { label: '', name: 'songti', val: '宋体,SimSun'},
        { label: '', name: 'kaiti', val: '楷体,楷体_GB2312, SimKai'},
        { label: '', name: 'yahei', val: '微软雅黑,Microsoft YaHei'},
        { label: '', name: 'heiti', val: '黑体, SimHei'},
        { label: '', name: 'lishu', val: '隶书, SimLi'},
        { label: '', name: 'andaleMono', val: 'andale mono'},
        { label: '', name: 'arial', val: 'arial, helvetica,sans-serif'},
        { label: '', name: 'arialBlack', val: 'arial black,avant garde'},
        { label: '', name: 'comicSansMs', val: 'comic sans ms'},
        { label: '', name: 'impact', val: 'impact,chicago'},
        { label: '', name: 'timesNewRoman', val: 'times new roman'}
      ],
      // 字号
      'fontsize': [10, 11, 12, 14, 16, 18, 20, 24, 36],
      enableAutoSave: false,
      autoHeightEnabled: false,
      initialFrameHeight: me.props.style.height,
      initialFrameWidth: '100%',
      wordCount: false,
      // , maximumWords: 999
      elementPathEnabled: false,
      emotionLocalization: true,
      readonly: me.props.disabled
      // , lineheight: ['2']  //行内间距 值和显示的名字相同
    })
    editor.ready(function() {
      var value = me.props.value ? me.props.value : '<p></p>'
      editor.setContent(value)
    })
    if (me.props.onChange) {
      editor.addListener('contentChange', function () {
        var value = editor.getContent()
        if (editor.getContent() === '') {
          value = '<p></p>'
        }
        me.props.onChange(value)
      })
    }
  }
  // 图片上传
  handleUpload() {
    var me = this
    window.UE.getEditor(me.props.id).focus()
    window.UE.getEditor(me.props.id).execCommand('inserthtml', '<img src="http://pic97.huitu.com/res/20160724/976_20160724152045497500_1.jpg"/>')
  }
  componentWillUnmount() {
    var me = this
    window.UE.delEditor(me.props.id)
  }
  render() {
    return <div className="wave-ueditor">
      <div id={this.props.id} name="content" type="text/plain"></div>
      <div className="upload">
        <button onClick={this.handleUpload.bind(this)}>图片</button>
      </div>
    </div>
  }
}

UEditor.defaultProps = {
  id: 'ueditorcontainer',
  name: 'uecontent',
  style: {
    height: 600,    // 注意这里只能是数字，不可有单位
    width: 600      // 注意这里只能是数字，不可有单位
  },
  initialContent: '<p><p>'
  // uconfigSrc:"/asset/js/ueditor/ueditor.config.js",
  // ueditorSrc:"/asset/js/ueditor/ueditor.all.min.js",
}

export default UEditor
